<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/css/elementui/index.css">
<link rel="stylesheet" href="/css/exam/css/style.css">
<link rel="stylesheet" href="/iconfont/iconfont.css">
</head>
<body>
<div id="app">
  <div  class="p-30">
    <el-row>
      <span class="icon iconfont icon-arrow_back"></span> <a href="{{ url()->previous() }}">返  回</a> | 考试记录
    </el-row><br>
    <!-- <el-row>
      <el-button  type="primary" @click="">下载pdf格式试卷</el-button>
    </el-row> -->

    <template>
        <div class="top float-left d-flex" style="border-bottom:1px solid #ddd">
          <div class="user-info">
            考&ensp;&ensp;生：<span>@{{user_data.name}}</span>
          </div>
          <div class="user-info">
            考&ensp;&ensp;卷：<span>@{{paperShowData.title}}</span>
          </div>
          <div class="score-info">
            及格分/总分：<span>@{{paperShowData.pass_score}}</span>/<span>@{{paperShowData.score}} </span>
          </div>
          <div class="score">
            考试得分：
            <strong>分</strong>
          </div>
        </div>
      <!--单选题-->
      <div v-for="(questionsdata,i) in questions_data"  class="choice-item"> 
          <div class="info">
            <span class="tit">@{{i + 1}}.单选题（@{{questionsdata.record_score}}分）<b style="color:#000">@{{questionsdata.questions.exam_content}}</b></span>
          </div>
		  <div class="question-content">
            <div class="question-render">
              <p></p>
            </div>
          </div>
          <div class="clear"></div>
          <div class="choice-box">

            <div class="choice-tap-item">
              <div class="index"  :class="{'blueback':questionsdata.user_answer == 'option1'}">
             A
              </div>
              <div class="content">
              <div class="question-render">
                <p>@{{questionsdata.questions.option1}}</p>
              </div>
              </div>
            </div>

            <div class="choice-tap-item">
              <div class="index" :class="{'blueback':questionsdata.user_answer == 'option2'}">
             B
              </div>
              <div class="content">
              <div class="question-render">
                <p>@{{questionsdata.questions.option2}}</p>
              </div>
              </div>
            </div>

            <div class="choice-tap-item">
              <div class="index" :class="{'blueback':questionsdata.user_answer == 'option3'}">
             C
              </div>
              <div class="content">
              <div class="question-render">
                <p>@{{questionsdata.questions.option3}}</p>
              </div>
              </div>
            </div>

            <div class="choice-tap-item">
              <div class="index" :class="{'blueback':questionsdata.user_answer == 'option4'}">
             D
              </div>
              <div class="content">
              <div class="question-render">
                <p>@{{questionsdata.questions.option4}}</p>
              </div>
              </div>
            </div>

          </div>
          <div class="clear"></div>
	  
		  <div class="pop-box">
		        <div class="status">
		          <span class="error" v-if="questionsdata.record_status == 0">错误</span>
		          <span class="yes"   v-else="questionsdata.record_status == 1">正确</span>
		        </div>
		        <div class="answer"> 用户答案：
		  					<span class="yes" v-if="questionsdata.user_answer == 'option1'">A</span>&nbsp;&nbsp;&nbsp;&nbsp;
		  					<span class="yes" v-else-if="questionsdata.user_answer == 'option2'">B</span>&nbsp;&nbsp;&nbsp;&nbsp;
		  					<span class="yes" v-else-if="questionsdata.user_answer == 'option3'">C</span>&nbsp;&nbsp;&nbsp;&nbsp;
		  					<span class="yes" v-else="questionsdata.user_answer == 'option4'">D</span>&nbsp;&nbsp;&nbsp;&nbsp;
							正确答案：
							<span class="yes" v-if="questionsdata.exam_answer == 'option1'">A</span>
							<span class="yes" v-else-if="questionsdata.exam_answer == 'option2'">B</span>
							<span class="yes" v-else-if="questionsdata.exam_answer == 'option3'">C</span>
							<span class="yes" v-else="questionsdata.exam_answer == 'option4'">D</span>
		  				</div>
		  </div>
		  
		   

      </div>
     
    </template>
  </div>
</div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return { 
      id:'',
      paperShowData: [], //试卷数据 
      user_data:[],//考生数据 
      questions_data:[],//考题数据 
      radio:'',
    }
  },
  created() {
    this.getUrlKey(),
    this.getpaperShowData()
  },

  methods: {
          //获取当前浏览器地址url中的id
          getUrlKey() {
          var url = window.location.href ;             //获取当前url
          var dz_url = url.split('#')[0];              //获取#/之前的字符串
          var cs = dz_url.split('?')[1];               //获取?之后的参数字符串
          var cs_arr = cs.split('&');                  //参数字符串分割为数组
          var cs={};
          for(var i=0;i<cs_arr.length;i++){         //遍历数组，拿到json对象
            cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
          }
          this.id = cs.id;
          console.log("this.id:"+this.id);
          },

          
         // 获取考试记录列表
          async getpaperShowData(parameter) {  
            let id = this.id;
            axios.post('/admin/paper/paper_record_detail',{id:id})
            .then(res =>{
                console.log('请求成功：');
                this.paperShowData = res.data.data.paper_data;  
                this.user_data = res.data.data.user_data;  
                this.questions_data = res.data.data.questions_data;  
            }).catch(error =>{
                console.log('请求失败：' + error);
            })
          },       
        }       

  })

</script>
<style>
   .top {
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 20px;
    box-sizing: border-box;
  }
 .top .user-info {
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 14px;
    margin-right: 30px;
  }
  .score-info {
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 14px;
    margin-right: 30px;
  }
 .score strong {
    color: #ff4d4f;
  }
 .el-form-item__label{float:none;font-size:16px}
.pop-box{
  border-radius: 8px;
  border: 1px solid #3ca7fa;
  padding: 10px 26px;
  box-sizing: border-box;
  color: #3ca7fa;
  width: 40%;
}
.pop-box .status {
  margin-bottom: 10px;
  font-size: 16px;
}
.pop-box .status .error{
  color: #ff5068;
}
.pop-box .status .yes {
  color: #016d01;
}
.choice-item:after{
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
.choice-item .info{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 30px 0 30px;
  background-color: #fff;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.choice-item .info .tit{
  height: 18px;
  font-size: 18px;
  font-weight: 500;
  color: #666;
  line-height: 18px;
}
.choice-item .question-content{
  width: 100%;
  height: auto;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  line-height: 24px;
  padding: 0 0 0 30px;
  background-color: #fff;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.choice-item .question-content{
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 24px;
  font-weight:bold;
}

.choice-item .choice-box{
  width: 100%;
  height: auto;
  float: left;
  box-sizing: border-box;
  padding: 10px 30px;
  background-color: #fff;
}
.choice-item .choice-box:after{
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
.clear:{clear:both;}
.choice-item .choice-box .choice-tap-item{
  width: 100%;
  height: auto;
  float: left;
  box-sizing: border-box;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.choice-item .choice-box .choice-tap-item .index{
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.choice-item .choice-box .choice-tap-item .blueback{
    background: #3ca7fa;
    border: 1px solid #3ca7fa;
    color: #fff;
  }
.choice-item .choice-box .choice-tap-item .content{
  flex: 1;
  color: #333;
  padding-left: 20px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
  background-color: #fff;
}
.choice-item .choice-box .choice-tap-item .content{
  color: #333;
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
}
.choice-item .choice-box .choice-tap-item .content p{
  margin-top:10px;
  margin-bottom:10px
}
.clear{clear:both}
.question-render p{padding:0}
b{font-weight:500}
</style>
</html>

